<template>
  <el-card>
    <el-row>
      <el-col :span="15">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px">
          <el-row>
            <el-col :lg="13" :xl="9">
              <el-form-item label="Business Type" prop="businessTypeList">
                <el-select multiple style="width: 100%" v-model="dataForm.businessTypeList" placeholder="Select BusinessType">
                  <el-option v-for="item in businessTypes" :key="item.value" :label="item.title" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :lg="13" :span="9">
              <el-form-item label="Country" prop="country">
                <el-select style="width: 100%" v-model="dataForm.country" placeholder="Select Country">
                  <el-option v-for="item in countryList" :key="item.value" :label="item.title" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="Name" prop="name">
                <el-input v-model="dataForm.name" placeholder="Name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="Name(CN)" prop="name">
                <el-input v-model="dataForm.nameCn" placeholder="Name(CN)"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="Code" prop="moduleCode">
                <el-input v-model="dataForm.moduleCode" placeholder="Code"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item label="Summary" prop="summary">
            <el-input
              v-model="dataForm.summary"
              type="textarea"
              :rows="5"
              :autosize="{ minRows: 4 }"
              maxlength="200"
              show-word-limit
              resize="none"
              placeholder="Summary"
            ></el-input>
          </el-form-item>
          <el-form-item label="Summary(CN)" prop="summaryCn">
            <el-input
              v-model="dataForm.summaryCn"
              type="textarea"
              :rows="5"
              :autosize="{ minRows: 4 }"
              maxlength="200"
              show-word-limit
              resize="none"
              placeholder="Summary(CN)"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="Price" prop="price">
            <el-row>
              <el-col :lg="5" :xl="3">
                <el-input type="number" v-model="dataForm.price">
                  <template slot="prefix">S$</template>
                </el-input>
              </el-col>
              <el-col :lg="8" :xl="6" :offset="1">
                <el-input type="number" v-model="dataForm.originalPrice">
                  <template slot="prepend">original price</template>
                  <template slot="prefix">S$</template>
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="Status" prop="status">
            <el-radio-group v-model="dataForm.status">
              <el-radio :label="0">Disable</el-radio>
              <el-radio :label="1">Enable</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="dataFormSubmit">Submit</el-button>
            <el-button @click="() => $router.push('/sys/pkg/module')">Back</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      dataId: undefined,
      dataForm: {
        businessTypeList: [],
        country: "",
        name: "",
        nameCn: "",
        moduleCode: "",
        summary: "",
        summaryCn: "",
        price: undefined,
        originalPrice: undefined,
        status: 1,
      },
      dataRule: {
        businessTypeList: [{ required: true, message: "Business Type is required", trigger: "blur" }],
        country: [{ required: true, message: "Country is required", trigger: "blur" }],
        name: [{ required: true, message: "Name is required", trigger: "blur" }],
        nameCn: [{ required: true, message: "Name(CN) is required", trigger: "blur" }],
        moduleCode: [{ required: true, message: "code is required", trigger: "blur" }],
      },
    };
  },
  computed: {
    ...mapState("constant", ["businessTypes", "countryList"]),
  },
  activated() {
    this.$refs.dataForm.resetFields();
    const id = this.$route.params.id;
    if (id) {
      this.dataId = id;
      this.getDetail(id);
    } else {
      this.dataId = undefined;
    }
  },
  methods: {
    async getDetail(id) {
      const { data } = await this.$http.get(`/moduleManage/${id}/detail`);
      if (data.configData) {
        data.configData = JSON.stringify(data.configData, null, 4);
      }
      this.dataForm = data;
    },
    async dataFormSubmit() {
      this.$refs["dataForm"].validate(async valid => {
        if (valid) {
          const dataId = this.dataId;
          const dataForm = { ...this.dataForm };
          let { code, msg } = await this.$http.post(dataId ? `/moduleManage/${dataId}/update` : "/moduleManage/create", dataForm);
          if (code === 200) {
            this.$message({
              message: "success",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.$router.push("/sys/pkg/module");
              },
            });
          } else {
            this.$message.error(msg);
          }
        }
      });
    },
  },
};
</script>
